<template>
  <nav class="navbar mb-4 px-4 sticky-top" style="background-color: #e3f2fd;">
    <RouterLink class="navbar-brand" to="/">ERP扩展系统</RouterLink>
    <ul v-if="!user.isLogin" class="list-inline">
        <li class="list-inline-item mb-0">
            <RouterLink to="/login" class="btn btn-outline-primary">Login</RouterLink>
        </li>
        <li class="list-inline-item mb-0">
            <RouterLink to="/signup" class="btn btn-outline-primary">Register</RouterLink>
        </li>
    </ul>
    <ul v-else class="list-inline">
        <li class="list-inline-item mb-0">
            <DropdownOptions :title="`你好 ${user.nickName}`">
                <DropdownItem>
                    <RouterLink to="/create" class="dropdown-item">Profile</RouterLink>
                </DropdownItem>
                <DropdownItem disabled>
                    <a href="#" class="dropdown-item">Settings</a>
                </DropdownItem>   
                <DropdownItem>
                    <RouterLink to="#" class="dropdown-item">Logout</RouterLink>
                </DropdownItem>
            </DropdownOptions>
        </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import DropdownOptions from './DropdownOptions.vue'
import DropdownItem from './DropdownItem.vue'
import { RouterLink } from 'vue-router'
import { UserProps } from '../store'

defineProps({
    user: {
        type: Object as PropType<UserProps>,
        required: true
    }
})
</script>

<style scoped>
dl, ol, ul{
    margin: 0;
}
</style>